<template>
  <div>
    <div class="banner"></div>
    <div class="isbody">
      <div class="content">
        <div class="isleft">
          <div
            :class="[indexs == index ? 'itemNow' : '', 'item']"
            v-for="(item, index) of moduleList"
            :key="index"
            @click="check(index, item.name)"
          >
            <img v-show="indexs != index" :src="item.iconNow" alt="" />
            <img v-show="indexs == index" :src="item.icon" alt="" />
            {{ item.name }}
          </div>
        </div>
        <div class="isright">
          <div
            v-show="newList.length > 0"
            class="item"
            @click="goDetail(item)"
            v-for="(item, index) of newList"
            :key="index"
            :style="index == 4 ? { border: 'none' } : ''"
          >
            <div class="isdate">
              <p class="text1">{{ item.create_time.split("-")[2] }}</p>
              <div
                style="
                  margin-bottom: 6px;
                  width: 16px;
                  height: 2px;
                  background: #e7e7e7;
                "
              ></div>
              <p class="text2">
                {{ item.create_time.split("-")[0] }}.{{
                  item.create_time.split("-")[1]
                }}
              </p>
            </div>
            <div class="item_content">
              <p class="text1">
                {{ item.title }}
              </p>
              <p class="text2">
                {{ item.brief }}
              </p>
              <p>查看详情</p>
            </div>
          </div>
          <el-empty
            v-show="newList.length == 0"
            description="暂无动态"
          ></el-empty>
        </div>
      </div>
      <div class="jiangsir">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/request";
export default {
  data() {
    return {
      count: 0,
      page: 1,
      size: 10,
      indexs: 0,
      moduleList: [
        {
          name: "平台公告",
          icon: require("@/assets/news/icon3.png"),
          iconNow: require("@/assets/news/icon3Now.png"),
        },
        {
          name: "行业动态",
          icon: require("@/assets/news/icon2.png"),
          iconNow: require("@/assets/news/icon2Now.png"),
        },
        {
          name: "政策法规",
          icon: require("@/assets/news/icon1.png"),
          iconNow: require("@/assets/news/icon1Now.png"),
        },
      ],
      classNow: "平台公告",
      newList: [],
    };
  },
  methods: {
    handleSizeChange(val) {
      this.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    check(index, name) {
      this.indexs = index;
      this.classNow = name;
      this.getList();
    },
    goDetail(item) {
      this.$router.push({
        path: "/newDetail",
        query: {
          id: item.id,
          category: item.category,
        },
      });
    },
    getList() {
      axios({
        method: "get",
        // url:'/api/index/feedback/create',
        url: "https://b.taijieyun.com/admin/article/list",
        params: {
          page: this.page,
          limit: this.size,
          category: this.classNow,
          field: "brief,id,category,create_time,title",
        },
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.newList = res.data.data.list;
            this.count = res.data.data.count;
            this.newList.map((item) => {
              item.create_time = item.create_time.split(" ")[0];
            });
          }
        })
        .catch((err) => {
          this.$message.error("服务器错误");
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .jiangsir {
    min-width: 1300px;
    width: 300px;
    margin: auto;
    .el-pagination {
      float: right;
    }
  }
}
p {
  margin: 0;
}
.banner {
  width: 100%;
  height: 530px;
  background: url("@/assets/news/banner.png");
  background-position: 50%;
  min-width: 1320px;
}
.isbody {
  width: 100%;
  height: 955px;
  background: #f7faff;
  overflow: hidden;
  .content {
    width: 1316px;
    height: 819px;
    margin: 36px auto 0;
    display: flex;
    justify-content: space-between;
    .isleft {
      width: 266px;
      height: 253px;
      background: #fff;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      align-content: space-around;
      img {
        width: 24px;
        height: 24px;
        margin-right: 6px;
      }
      .item {
        width: 246px;
        height: 55px;
        background: #fff;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        line-height: 25px;
        letter-spacing: 1px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }
      .itemNow {
        background: #0a54dc;

        color: #ffffff;
      }
    }
    .isright {
      overflow-y: auto;

      overflow-x: hidden;
      box-sizing: border-box;
      width: 1030px;
      height: 819px;
      background: #fff;
      padding: 36px 56px 52px;
      &::-webkit-scrollbar {
        width: 8px;
      }
      /* 滚动槽 */
      &::-webkit-scrollbar-track {
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.05);
      }
      /* 滚动条滑块 */
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: #cfcece;
      }

      .item {
        cursor: pointer;
        width: 918px;
        height: 132px;
        margin-top: 24px;
        background: #fff;
        border-bottom: 1px solid #eee;
        display: flex;
        .isdate {
          width: 85px;
          height: 107px;
          border-right: 1px solid #eeeeee;
          overflow: hidden;
          .text1 {
            font-size: 36px;
            font-weight: 400;
            color: #333333;
            line-height: 50px;
            margin-top: 16px;
            margin-bottom: 6px;
          }
          .text2 {
            width: 37px;
            height: 12px;
            font-size: 10px;
            font-family: Helvetica;
            color: #888a9c;
            line-height: 12px;
          }
        }
        .item_content {
          padding-left: 40px;
          .text1 {
            font-size: 16px;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            margin-bottom: 16px;
            width: 792px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .text2 {
            font-size: 14px;
            font-weight: 400;
            color: #888a9c;
            line-height: 20px;
            margin-bottom: 12px;
            height: 40px;
            overflow: hidden;
            width: 792px;
            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
      }
    }
  }
}
</style>